<!-- 角色管理页-->
<template>
	<ex_super_table_page v-bind="option" class="page-container" ref="SuperTablePage">
		<template v-slot:priceInfo="{ row }">
			<!-- 价卡信息 -->
			<div style="display: flex;  line-height: 32px; flex-direction: column; flex:1; " :class="(row.status == 'DISABLED' ? 'disable-class' : '') + ' '">
				<div style="display: flex;  align-items: center;  line-height: 32px;  flex-direction: row;" class="price-version-row-div">
					<div style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">
						<template>
							标准价卡
						</template>
					</div>
					<div style="flex: 1;  margin-left: 12px;">
						<template>
							<span v-for="(item, index) in row.standardPriceVersions">
								<span :class="isExpired(item.versionEndTime) ? `tag-red tag-product` : `tag-blue tag-product`">
									<i class="el-icon-check" v-if="index == 0 && row.status == 'ENABLE' && !isExpired(item.versionEndTime)">生效中</i>
									<i class="el-icon-warning-outline" v-if="isExpired(item.versionEndTime)">>已过期</i>
									{{ $dateFormatDate(item.versionStartTime) }}
									<template v-if="index == row.standardPriceVersions.length - 1">
										{{ ' 至 ' + $dateFormatDate(item.versionEndTime) }}
									</template>
								</span>
							</span>
						</template>
					</div>

					<div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">
						<el-button
							type="text"
							v-auth="'pms_return_goods_product_edit'"
							@click="
								$router.push({
									path: './return_goods_product_edit',
									query: { id: row.id, edit: true }
								})
							"
							>编辑产品
						</el-button>
						<ex-button-delete v-if="row.status == 'ENABLE'" v-auth="'pms_return_goods_product_disable'" deleteUrl="/fms-api/product/PmsReturnProductRpc/updateStatus.json" :deleteParam="{ id: row.id, status: 'DISABLED' }" @afterOperationDone="reload" message="确认禁用该产品？" label="禁用产品"> </ex-button-delete>
						<ex-button-delete v-if="row.status == 'DISABLED'" v-auth="'pms_return_goods_product_disable'" deleteUrl="/fms-api/product/PmsReturnProductRpc/updateStatus.json" :deleteParam="{ id: row.id, status: 'ENABLE' }" @afterOperationDone="reload" message="确认启用该产品？" label="启用产品"> </ex-button-delete>

						<el-button type="text" @click="addNewCustomerPrice(row)" style="margin-left: 0px;">添加客户价卡</el-button>
					</div>
				</div>

				<div v-for="(item, index) in row.customerPriceVersions" style="display: flex; align-items: center;   line-height: 32px;  flex-direction: row;" :class="(item.status == 'DISABLED' ? 'disable-class' : '') + ' price-version-row-div'">
					<div style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">
						{{ item.versionName }}
					</div>
					<div style="flex: 1;  margin-left: 12px;">
						<span v-for="(subItem, index) in item.versions">
							<span :class="isExpired(subItem.versionEndTime) ? `tag-red tag-product` : `tag-blue tag-product`">
								<i class="el-icon-check" v-if="index == 0 && item.status == 'ENABLE' && !isExpired(subItem.versionEndTime)">生效中</i>
								<i class="el-icon-warning" v-if="isExpired(subItem.versionEndTime)">已过期</i>
								{{ $dateFormatDate(subItem.versionStartTime) }}
								<template v-if="index == item.versions.length - 1">{{ ' 至 ' + $dateFormatDate(subItem.versionEndTime) }}</template>
							</span>
						</span>
					</div>
					<div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">
						<el-button
							type="text"
							v-auth="'pms_return_goods_product_edit'"
							@click="
								$router.push({
									path: './return_goods_product_edit_customer',
									query: { pid: row.id, vid: item.versionId, emitKey }
								})
							"
							>编辑价卡
						</el-button>
						<ex-button-delete v-if="item.status == 'ENABLE'" v-auth="'pms_return_goods_product_disable'" deleteUrl="/fms-api/product/PmsReturnProductCustomerPriceRpc/updateStatus.json" :deleteParam="{ id: item.versionId, status: 'DISABLED' }" @afterOperationDone="reload" message="确认禁用该价卡？" label="禁用价卡"> </ex-button-delete>
						<ex-button-delete v-else v-auth="'pms_return_goods_product_disable'" deleteUrl="/fms-api/product/PmsReturnProductCustomerPriceRpc/updateStatus.json" :deleteParam="{ id: item.versionId, status: 'ENABLE' }" @afterOperationDone="reload" message="确认启用该价卡？" label="启用价卡"> </ex-button-delete>

						<ex-button-delete v-auth="'pms_return_goods_product_edit'" deleteUrl="/fms-api/product/PmsReturnProductCustomerPriceRpc/remove.json" :deleteParam="{ id: item.versionId }" @afterOperationDone="reload" message="确认删除价卡吗？" label="删除价卡"> </ex-button-delete>

						<el-button
							type="text"
							v-auth="'pms_return_goods_product_edit'"
							@click="
								$refs['returnGoodsPermissionDialog'].showDialog({
									showType: 'version',
									productId: row.id,
									productCode: row.productCode,
									productName: row.productName,
									versionId: item.versionId,
									versionName: item.versionName,
									customerViewType: 'WHITE'
								})
							"
						>
							生效客户
						</el-button>
					</div>
				</div>
			</div>
		</template>
		<template v-slot:permission>
			<return_goods_customer_permission_dialog ref="returnGoodsPermissionDialog"></return_goods_customer_permission_dialog>
		</template>
	</ex_super_table_page>
</template>

<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';
import return_goods_customer_permission_dialog from '@/component/pms/return_goods_customer_permission_dialog.vue';

let emitKey = 'pms>return_goods_product';
export default {
	title: 'label_return_goods_product_manage',
	mixins: [superTablePageFunction, emitOnFunction(emitKey)],
	components: { return_goods_customer_permission_dialog },

	data() {
		return {
			emitKey: emitKey,
			option: {
				search: {
					model: [
						{ slot: 'permission' },
						// 关键字
						{ label: 'label_fms_bank_card_keyword', key: 'keyWord', attrs: { clearable: true } },
						// 状态
						{ label: 'label_pms_product_code', key: 'productCode' },
						{
							label: 'label_pms_product_status',
							key: 'status',
							type: 'select',
							enum: 'IsAvailableStatusEnum',
							attrs: { clearable: true }
						}
					]
				},
				action: [
					{
						//  新增仓储产品
						label: 'label_create_return_goods_product',
						auth: 'pms_return_goods_product_edit',
						attrs: { icon: 'el-icon-plus' },
						click: () => {
							this.$router.push({
								path: './return_goods_product_edit',
								query: { emitKey }
							});
						}
					}
				],

				table: {
					url: '/fms-api/product/PmsReturnProductRpc/selectPage.json',
					model: [
						// 仓储产品名称
						{ key: 'productName', label: 'label_pms_product_name', align: 'left' },
						// 产品编码
						{ key: 'productCode', label: 'label_pms_product_code', align: 'left' },
						{ slot: 'priceInfo', label: '价卡配置', align: 'left', 'min-width': 600 }
					]
				}
			}
		};
	},

	methods: {
		// 判断是否过期
		isExpired(time) {
			return time < new Date().getTime();
		},

		addNewCustomerPrice(row) {
			this.$ajax({
				url: '/fms-api/product/PmsReturnProductCustomerPriceRpc/getRandomId.json',
				data: {
					productId: row.id
				},
				success: (res) => {
					let tmpId = res.data;
					this.$router.push({
						path: './return_goods_product_edit_customer',
						query: { pid: row.id, vid: tmpId, emitKey }
					});
				}
			});
		}
	}
};
</script>
<style lang="less" scoped>
.tag-orange {
	border: 1px solid #e37324;
	color: #e37324;
	padding: 2px 6px 2px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-red {
	border: 1px solid #c42020;
	color: #c42020;
	padding: 2px 6px 2px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-pink {
	border: 1px solid #bb3cdb;
	color: #bb3cdb;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-blue {
	border: 1px solid #2d8ae5;
	color: #2d8ae5;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-blue2 {
	border: 1px solid #2d8ae5;
	background-color: #2d8ae5;
	color: #fff;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-orange {
	border: 1px solid #ec9146;
	color: #ec9146;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-green {
	border: 1px solid #278000;
	color: #278000;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-green2 {
	border: 1px solid #278000;
	background-color: #278000;
	color: #fff;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-yellow {
	border: 1px solid #c6ab0a;
	color: #c6ab0a;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.tag-gray {
	border: 1px solid #807e7e;
	color: #807e7e;
	padding: 1px 6px 1px 6px;
	border-radius: 6px;
	margin-right: 10px;
	word-break: keep-all;
}

.product-table-td {
	vertical-align: top;
}

.disable-class .tag-product {
	color: #b4b4b4;
	border: 1px solid #b4b4b4;
}

.price-version-row-div:hover {
	background-color: #ebfbff;
}
</style>
